<template>
<!--  查询采购记录头部的组件-->
<div style="display: flex">
  <div >
    <el-button type="text" @click="dialogVisible = true">条件查询选择窗口</el-button>
    <el-dialog
      title="条件查询"
      :visible.sync="dialogVisible"
      width="51%"
      >
      <div style="display: flex;flex-wrap: wrap">
        <div>
          <span style="margin-top: 4px;font-size: 17px">出库时间&nbsp;:&nbsp;</span>
          <el-date-picker

            v-model="selectMsg.timeZone"
            type="daterange"
            align="right"
            unlink-panels
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            :picker-options="pickerOptions">
          </el-date-picker>
        </div>
        <div style="margin-left:50px">
          <span style="margin-top: 4px;font-size: 17px">产品大类&nbsp;:&nbsp;</span>
          <el-select v-model="selectMsg.bigTypeId"  @change="changeBigType" style="width: 150px">
            <el-option
              v-for="item in bigTypeList"
              :key="item.bigTypeId"
              :label="item.bigTypeName"
              :value="item.bigTypeId">
            </el-option>
          </el-select>
        </div>
        <div style="margin-top: 15px">
          <span style="margin-top: 4px;font-size: 17px">厚度/规格:&nbsp;</span>
          <el-input clearable style="width: 200px" v-model="selectMsg.specification"></el-input>

        </div>
        <div style="margin-top: 15px;margin-left: 200px">
          <span style="margin-top: 4px;font-size: 17px">产品小类&nbsp;:&nbsp;</span>
          <el-select v-model="selectMsg.smallTypeId" @change="changeSmallType"  style="width: 150px">
            <el-option
              v-for="item in smallTypeList"
              :key="item.smallTypeId"
              :label="item.smallTypeName"
              :value="item.smallTypeId">
            </el-option>
          </el-select>
          </div>
        <div style="margin-top: 15px">

        </div>
        <div style="margin-top: 15px;margin-left: 440px">
          <span style="margin-top: 4px;font-size: 17px">客户名称:&nbsp;</span>
          <el-input clearable style="width: 200px" v-model="selectMsg.clientName"></el-input>
        </div>
        <div style="margin-top: 15px;margin-left: 500px;background-color: #f2f2f2;height: 85px;width:200px;padding-top: 10px;padding-left: 20px;border-radius: 20px;">
          <el-checkbox v-model="selectMsg.showAllPayInvoice">显示全部情况(付款,开票)</el-checkbox>
          <el-switch style="margin-top: 5px" :disabled="selectMsg.showAllPayInvoice"
            v-model="selectMsg.showPay"
            active-text="未收款完毕"
            inactive-text="付款完毕">
          </el-switch>
          <el-switch style="margin-top: 5px" :disabled="selectMsg.showAllPayInvoice"
                     v-model="selectMsg.showInvoice"
                     active-text="未开票完毕"
                     inactive-text="开票完毕">
          </el-switch>
        </div>
      </div>

      <span slot="footer" class="dialog-footer">
    <el-button type="danger"   @click="restartMsg">重 填</el-button>
    <el-button type="primary" @click="selectMsgWay">查 询</el-button>
  </span>
    </el-dialog>
  </div>
</div>
</template>

<script>
import {get} from "../../utils/request";
import {SALE_RECORDING_DATA} from "../../utils/basic-data";

export default {
  name: "SelectByCondition",
  data(){
    return{
      warehouseList:[],
      bigTypeList:[],
      smallTypeList:[],
      dialogVisible: false,
      selectMsg:{
        currentPage:1,
        pageSize:SALE_RECORDING_DATA,
        timeZone:null,
        bigTypeId:null,
        smallTypeId:null,
        specification:null,
        clientName:null,
        showAllPayInvoice:true,
        showPay:false,
        showInvoice:false
      },
      pickerOptions: {
        shortcuts: [{
          text: '最近一周',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近一个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近三个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
            picker.$emit('pick', [start, end]);
          }
        }]
      },
    }
  },
  mounted() {
    get("/api/v1/big-type-show").then(resp=>{
      this.bigTypeList=resp.data
      this.bigTypeList.unshift({bigTypeId: 0,bigTypeName:'所有大类',unitId:0})
      this.selectMsg.bigTypeId=0
    })
    get("/api/v1/small-type-show/condition").then(resp=>{
      this.smallTypeList=resp.data
      this.smallTypeList.unshift({smallTypeId: 0,smallTypeName:'所有小类',bigTypeId:0})
      this.selectMsg.smallTypeId=0
    })
  },
  methods:{
    selectMsgWay(){
      this.dialogVisible=false
      this.$emit("selectMsgWay",this.selectMsg)
    },
    restartMsg(){
      this.changeBigType(0);
      this.changeSmallType(0);
      this.selectMsg.timeZone=null;
      this.selectMsg.specification=null,
        this.selectMsg.clientName=null,
        this.selectMsg.showAllPayInvoice=true,
        this.selectMsg.showPay=false,
        this.selectMsg.showInvoice=false
    },
    changeBigType(value){
      if (value!==0){
        get("/api/v1/small-type-show/condition",{bigTypeId:value}).then(resp=>{
          this.smallTypeList=resp.data
          this.smallTypeList.unshift({smallTypeId: 0,smallTypeName:'所有小类',bigTypeId:0})
          this.selectMsg.smallTypeId=0
        })
      }else {
        this.changeSmallType(0)
        get("/api/v1/small-type-show/condition").then(resp=>{
          this.smallTypeList=resp.data
          this.smallTypeList.unshift({smallTypeId: 0,smallTypeName:'所有小类',bigTypeId:0})
          this.selectMsg.smallTypeId=0
        })
      }

    },
    changeSmallType(value){
      if (value!==0){
        get("/api/v1/big-type-show",{smallTypeId:value}).then(resp=>{
          this.bigTypeList=resp.data
          this.selectMsg.bigTypeId=resp.data[0].bigTypeId;
          this.bigTypeList.unshift({bigTypeId: 0,bigTypeName:'所有大类',unitId:0})
        })
      }else {
        get("/api/v1/big-type-show").then(resp=>{
          this.bigTypeList=resp.data
          this.bigTypeList.unshift({bigTypeId: 0,bigTypeName:'所有大类',unitId:0})
          this.selectMsg.bigTypeId=0
        })
      }

    },
  }
}
</script>

<style scoped>

</style>
